<template>
  <el-drawer :title="!dataForm.id ? '新建' : '编辑'" :visible.sync="visible"
             :wrapperClosable="false" size="800px" append-to-body
             class="JNPF-common-drawer">
    <div class="JNPF-flex-main">
      <div class="dynamicForm ">
        <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px" label-position="top">
          <template v-if="!loading">
            <el-col :span="12">
              <el-form-item label="资产信息"
                            prop="assetId">
                <el-select v-model="dataForm.assetId"
                           placeholder="请选择" clearable :style='{"width":"98%"}' filterable>
                  <el-option v-for="(item, index) in assetIdOptions" :key="index" :label="item.ASSET_NAME+'（' + item.ASSET_CODE +'）'"
                             :value="item.id" :disabled="item.disabled"></el-option>

                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="抵押单位"
                            prop="mortgageCompany">
                <el-select v-model="dataForm.mortgageCompany"
                           placeholder="请选择" clearable :style='{"width":"98%"}'>
                  <el-option v-for="(item, index) in mortgageCompanyOptions" :key="index" :label="item.fullName"
                             :value="item.id" :disabled="item.disabled"></el-option>

                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="抵押期间"
                            prop="mortgageDate">
                <el-date-picker v-model="dataForm.mortgageDate" type="daterange"
                                value-format="timestamp" format="yyyy-MM-dd" start-placeholder="抵押期间"
                                end-placeholder="抵押期间"></el-date-picker>
              </el-form-item>
            </el-col>
<!--            <el-col :span="12">-->
<!--              <el-form-item label="抵押开始日期"-->
<!--                            prop="mortgageStartDate">-->
<!--                <el-date-picker v-model="dataForm.mortgageStartDate"-->
<!--                                placeholder="请选择" clearable :style='{"width":"98%"}' type="date" format="yyyy-MM-dd"-->
<!--                                value-format="timestamp">-->

<!--                </el-date-picker>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--              <el-form-item label="抵押结束日期"-->
<!--                            prop="mortgageEndDate">-->
<!--                <el-date-picker v-model="dataForm.mortgageEndDate"-->
<!--                                placeholder="请选择" clearable :style='{"width":"98%"}' type="date" format="yyyy-MM-dd"-->
<!--                                value-format="timestamp">-->

<!--                </el-date-picker>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="12">
              <el-form-item label="抵押金额"
                            prop="mortgageAmount">
                <el-input v-model="dataForm.mortgageAmount"
                          placeholder="请输入" clearable :style='{"width":"98%"}'>
                  <template slot="prepend">￥</template>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注"
                            prop="remark">
                <el-input v-model="dataForm.remark"
                          placeholder="请输入" :maxlength="500" :style='{"width":"98%"}' true type="textarea"
                          :autosize='{"minRows":4,"maxRows":4}'>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="附件"
                            prop="attachmentUrls">
                <JNPF-UploadFz v-model="dataForm.attachmentUrls"
                               :fileSize="10" sizeUnit="MB" :limit="9" buttonText="点击上传">

                </JNPF-UploadFz>
              </el-form-item>
            </el-col>
          </template>
        </el-form>
        <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm"
                      ref="selectDialog" @select="addForSelect" @close="selectDialogVisible=false"/>
      </div>
      <div class="drawer-footer">
        <el-button @click="visible = false"> 取 消</el-button>
        <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> 确 定</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import request from '@/utils/request'
import {getDataInterfaceRes} from '@/api/systemData/dataInterface'
import {getDictionaryDataSelector} from '@/api/systemData/dictionary'

export default {
  components: {},
  props: [],
  data() {
    return {
      visible: false,
      loading: false,
      btnLoading: false,
      selectDialogVisible: false,
      currTableConf: {},
      addTableConf: {},
      tableRows: {},
      currVmodel: "",
      dataForm: {
        assetId: "",
        mortgageCompany: "",
        mortgageDate: [],
        mortgageStartDate: '',
        mortgageEndDate: '',
        mortgageAmount: '',
        remark: '',
        attachmentUrls: [],
      },
      rules:
        {
          assetId: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            },
          ],
          mortgageCompany: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            },
          ],
          mortgageDate: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            },
          ],
          // mortgageStartDate: [
          //   {
          //     required: true,
          //     message: '请选择',
          //     trigger: 'change'
          //   },
          // ],
          // mortgageEndDate: [
          //   {
          //     required: true,
          //     message: '请选择',
          //     trigger: 'change'
          //   },
          // ],
          mortgageAmount: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
            {
              pattern: /^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$/,
              message: '请输入正确的金额',
              trigger: 'blur'
            },
          ],


        },
      assetIdOptions: [],
      mortgageCompanyOptions: [],

    }
  },
  computed: {},
  watch: {},
  created() {
    this.getassetIdOptions();
    this.getmortgageCompanyOptions();
  },
  mounted() {
  },
  methods: {
    getassetIdOptions() {
      getDataInterfaceRes('612769091110831365').then(res => {
        let data = res.data
        this.assetIdOptions = data
      })
    },
    getmortgageCompanyOptions() {
      getDictionaryDataSelector('610824142995849541').then(res => {
        this.mortgageCompanyOptions = res.data.list
      })
    },
    clearData() {
      this.dataForm.assetId = "";
      this.dataForm.mortgageCompany = "";
      this.dataForm.mortgageDate = [];
      this.dataForm.mortgageStartDate = '';
      this.dataForm.mortgageEndDate = '';
      this.dataForm.mortgageAmount = '';
      this.dataForm.remark = '';
      this.dataForm.attachmentUrls = [];
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs['elForm'].resetFields();
        if (this.dataForm.id) {
          this.loading = true
          request({
            url: '/api/zc/ZcAssetMortgage/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          });
        } else {
          this.clearData()
        }
      });
      this.$store.commit('generator/UPDATE_RELATION_DATA', {})
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          this.request()
        }
      })
    },
    request() {
      this.btnLoading = true
      let _data = this.dataList()
      if (!this.dataForm.id) {
        request({
          url: '/api/zc/ZcAssetMortgage',
          method: 'post',
          data: _data
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.btnLoading = false
              this.$emit('refresh', true)
            }
          })
        }).catch(() => {
          this.btnLoading = false
        })
      } else {
        request({
          url: '/api/zc/ZcAssetMortgage/' + this.dataForm.id,
          method: 'PUT',
          data: _data
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.btnLoading = false
              this.$emit('refresh', true)
            }
          })
        }).catch(() => {
          this.btnLoading = false
        })
      }
    },
    openSelectDialog(key) {
      this.currTableConf = this.addTableConf[key]
      this.currVmodel = key
      this.selectDialogVisible = true
      this.$nextTick(() => {
        this.$refs.selectDialog.init()
      })
    },
    addForSelect(data) {
      for (let i = 0; i < data.length; i++) {
        let item = {...this.tableRows[this.currVmodel], ...data[i]}
        this.dataForm[this.currVmodel].push(item)
      }
    },
    dataList() {
      var _data = JSON.parse(JSON.stringify(this.dataForm));
      if (_data.mortgageDate && _data.mortgageDate.length == 2){
        _data.mortgageStartDate = _data.mortgageDate[0]
        _data.mortgageEndDate = _data.mortgageDate[1]
      }
      _data.attachmentUrls = Array.isArray(_data.attachmentUrls) ? JSON.stringify(_data.attachmentUrls) : '[]'
      return _data;
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      _dataAll.mortgageDate = _dataAll.mortgageStartDate || _dataAll.mortgageEndDate ? [_dataAll.mortgageStartDate, _dataAll.mortgageEndDate] : []
      _dataAll.attachmentUrls = _dataAll.attachmentUrls ? JSON.parse(_dataAll.attachmentUrls) : []
      this.dataForm = _dataAll
    },
  },
}

</script>
